// 实现这个项目的构建任务
// src dest 文件读写流   series 串行任务，parallel 并行任务 wathc 监听文件规则执行对应任务
const {src,dest,series,parallel,watch} = require('gulp');
//用来加载gulp-开头的包
const loadPlugins = require('gulp-load-plugins')();
//删除文件目录
const del = require('del')
//新版引用sass方式要处理一下
const sass = loadPlugins.sass(require('sass'));

const browserServer = require('browser-sync').create();

//复制过来的data数据
const data = {
    menus: [
      {
        name: 'Home',
        icon: 'aperture',
        link: 'index.html'
      },
      {
        name: 'Features',
        link: 'features.html'
      },
      {
        name: 'About',
        link: 'about.html'
      },
      {
        name: 'Contact',
        link: '#',
        children: [
          {
            name: 'Twitter',
            link: 'https://twitter.com/w_zce'
          },
          {
            name: 'About',
            link: 'https://weibo.com/zceme'
          },
          {
            name: 'divider'
          },
          {
            name: 'About',
            link: 'https://github.com/zce'
          }
        ]
      }
    ],
    pkg: require('./package.json'),
    date: new Date()
  }

const clean = () => {
    return del(['dist','temp'])
}
//样式
const style = () => {
    return src('src/assets/styles/*.scss',{base:'src'})
    .pipe(sass())
    .pipe(dest('temp'));
}
//脚本
const scripts = () => {
    return src('src/assets/scripts/*.js',{base:'src'})
    .pipe(loadPlugins.babel({
        presets:['@babel/preset-env']
    }))
    .pipe(dest('temp'));
}
//html模板
const html = () => {
    return src('src/*.html',{base:'src'})
    .pipe(loadPlugins.swig({data,defaults: { cache: false }}))
    .pipe(dest('temp'));
}
//图片
/**
 * imagemin  8.0.0版本不支持commonjs  需要安装7.1.0版本
 */
const image = () => {
    return src('./src/assets/images/**',{base:'src'})
    .pipe(loadPlugins.imagemin())
    .pipe(dest('dist'));
}
//字体相关
const fonts = () => {
    return src('src/assets/fonts/**',{base:'src'})
    .pipe(loadPlugins.imagemin())
    .pipe(dest('dist'));
}
//public目录文件
const public = () => {
    return src('public/**',{base:'src'})
    .pipe(dest('dist'));
}

const useref = () => {
    return src('temp/*.html',{base:'temp'})
    .pipe(loadPlugins.useref({searchPath:['temp','.']}))
    .pipe(loadPlugins.if(/\.js$/,loadPlugins.uglify()))
    .pipe(loadPlugins.if(/\.css$/,loadPlugins.cleanCss()))
    .pipe(loadPlugins.if(/\.html$/,loadPlugins.htmlmin({
        collapseWhitespace:true,
        minifyCSS:true,
        minifyJs:true
    })))
    .pipe(dest('dist'))
}

//本地开发服务
const serve = () => {
    watch('src/assets/styles/*.scss', style);
    watch('src/assets/scripts/*.js', scripts);
    watch('src/*.html', html);
    watch(['./src/assets/images/**', 'src/assets/fonts/**', 'public/**'], browserServer.reload);
    return browserServer.init({
        open: false,
        files:['temp'],
        server: {
            baseDir: ['temp', 'src', 'public'],
            routes: { '/node_modules': 'node_modules' }
        }
    })
}
const complie = parallel(style,scripts,html);
const develop = series(clean,complie,serve)
//注意complie,useref顺序
const build = series(clean,series(complie,useref),image,fonts,public)

module.exports = {
    clean,
    develop,
    build
}